<template>
	<view class="detail-container">
		<view class="book-header">
			<image class="book-cover" :src="book.coverUrl" mode="aspectFill"></image>
			<view class="book-info">
				<text class="book-title">{{book.title}}</text>
				<text class="book-author">{{book.author}}</text>
				<text class="book-category">{{book.category}}</text>
				<view class="book-stats">
					<text class="stat-item">字数：{{book.wordCount || '未知'}}</text>
					<text class="stat-item">阅读：{{book.readCount || 0}}</text>
				</view>
			</view>
		</view>
		
		<view class="action-buttons">
			<button class="read-btn" @click="startReading">开始阅读</button>
			<button class="shelf-btn" @click="toggleBookshelf">{{isInBookshelf ? '已在书架' : '加入书架'}}</button>
		</view>
		
		<view class="book-intro">
			<view class="section-title">内容简介</view>
			<text class="intro-text">{{book.description}}</text>
		</view>
		
		<view class="book-catalog">
			<view class="section-title">目录</view>
			<view class="catalog-list">
				<view class="chapter-item" v-for="(chapter, index) in chapters" :key="index" @click="readChapter(index)">
					<text class="chapter-title">{{chapter.title}}</text>
					<text class="chapter-time">{{chapter.updateTime}}</text>
				</view>
			</view>
		</view>
		
		<view class="book-comments">
			<view class="section-title">热门书评</view>
			<view class="comment-list">
				<view class="comment-item" v-for="(comment, index) in comments" :key="index">
					<view class="comment-header">
						<image class="user-avatar" :src="comment.avatar" mode="aspectFill"></image>
						<view class="comment-user">
							<text class="user-name">{{comment.username}}</text>
							<text class="comment-time">{{comment.time}}</text>
						</view>
					</view>
					<text class="comment-content">{{comment.content}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bookId: null,
				isInBookshelf: false,
				book: {
					id: 1,
					title: '三体',
					author: '刘慈欣',
					coverUrl: 'https://img9.doubanio.com/view/subject/s/public/s2768378.jpg',
					description: '文化大革命如火如荼进行的同时，军方探寻外星文明的绝秘计划"红岸工程"取得了突破性进展。但在按下发射键的那一刻，历经劫难的叶文洁没有意识到，她彻底改变了人类的命运。地球文明向宇宙发出的第一声啼鸣，以太阳为中心，以光速向宇宙深处飞驰……',
					category: '科幻',
					wordCount: '51万字',
					readCount: 10245
				},
				chapters: [
					{ title: '第一章 疯狂的科学家', updateTime: '2023-01-01' },
					{ title: '第二章 三体问题', updateTime: '2023-01-01' },
					{ title: '第三章 射手和农场主', updateTime: '2023-01-01' },
					{ title: '第四章 三体世界', updateTime: '2023-01-01' },
					{ title: '第五章 叶文洁', updateTime: '2023-01-01' },
					{ title: '第六章 宇宙闪烁', updateTime: '2023-01-01' },
					{ title: '第七章 聚变', updateTime: '2023-01-01' },
					{ title: '第八章 红岸之后', updateTime: '2023-01-01' }
				],
				comments: [
					{
						username: '读者1',
						avatar: 'https://img1.baidu.com/it/u=1817953158,2741675494&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						time: '2023-05-20',
						content: '这本书改变了我对科幻小说的认识，宏大的宇宙观和细腻的人物刻画完美结合。'
					},
					{
						username: '读者2',
						avatar: 'https://img0.baidu.com/it/u=2630198167,3078148990&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						time: '2023-04-15',
						content: '三体系列是中国科幻文学的里程碑，刘慈欣的想象力令人叹为观止。'
					}
				]
			}
		},
		onLoad(options) {
			if (options.id) {
				this.bookId = parseInt(options.id);
				// 实际项目中这里应该根据ID获取书籍详情
				this.checkBookshelfStatus();
			}
		},
		methods: {
			startReading() {
				uni.navigateTo({
					url: `/pages/reader/reader?id=${this.book.id}&chapter=0`
				});
			},
			toggleBookshelf() {
				if (this.isInBookshelf) {
					// 从书架移除
					uni.showModal({
						title: '提示',
						content: '确定要从书架中移除这本书吗？',
						success: (res) => {
							if (res.confirm) {
								this.isInBookshelf = false;
								uni.showToast({
									title: '已从书架移除',
									icon: 'success'
								});
							}
						}
					});
				} else {
					// 加入书架
					this.isInBookshelf = true;
					uni.showToast({
						title: '已加入书架',
						icon: 'success'
					});
				}
			},
			readChapter(index) {
				uni.navigateTo({
					url: `/pages/reader/reader?id=${this.book.id}&chapter=${index}`
				});
			},
			checkBookshelfStatus() {
				// 实际项目中这里应该检查书籍是否在书架中
				// 这里简单模拟，ID为1的书已在书架中
				this.isInBookshelf = this.bookId === 1;
			}
		}
	}
</script>

<style>
	.detail-container {
		padding: 30rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}
	
	.book-header {
		display: flex;
		margin-bottom: 40rpx;
	}
	
	.book-cover {
		width: 240rpx;
		height: 320rpx;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	}
	
	.book-info {
		flex: 1;
		padding-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.book-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.book-author {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}
	
	.book-category {
		font-size: 24rpx;
		color: #d81e06;
		background-color: rgba(216, 30, 6, 0.1);
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
    width: fit-content;
	}
	
	.book-stats {
		display: flex;
		flex-wrap: wrap;
	}
	
	.stat-item {
		font-size: 24rpx;
		color: #999;
		margin-right: 20rpx;
	}
	
	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}
	
	.read-btn, .shelf-btn {
		width: 48%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		text-align: center;
	}
	
	.read-btn {
		background-color: #d81e06;
		color: #fff;
	}
	
	.shelf-btn {
		background-color: #f8f8f8;
		color: #d81e06;
		border: 1px solid #d81e06;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.book-intro {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
	}
	
	.intro-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}
	
	.book-catalog {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
	}
	
	.catalog-list {
		max-height: 600rpx;
		overflow-y: auto;
	}
	
	.chapter-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.chapter-title {
		font-size: 28rpx;
		color: #333;
	}
	
	.chapter-time {
		font-size: 24rpx;
		color: #999;
	}
	
	.book-comments {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 15rpx;
	}
	
	.comment-item {
		margin-bottom: 30rpx;
	}
	
	.comment-header {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.user-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}
	
	.comment-user {
		display: flex;
		flex-direction: column;
	}
	
	.user-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 5rpx;
	}
	
	.comment-time {
		font-size: 24rpx;
		color: #999;
	}
	
	.comment-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}
</style>